<html>
<link href="css/global.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<body class="chat-bg">
	<header class="header-title">与囡囡的对话</header>
	<section class="chat-box">
		<span class="chat-trip">此刻对方忙碌，请留言</span>
		<div class="bubbleDiv"></div>
	</section>
	<footer class="chat-edit clearfix">
		<p class="chat-info" contenteditable="true"></p>
		<span class="uploadImg fl"><input type="file" name="uploadfile"
			class="uploadfile"></span>
		<button class="send-btn fr" onclick="send()">发送</button>
	</footer>
	<#include "inc/music.ftl"/>
	<script src="js/jquery.min.js"></script>
	<script src="js/chat.js"></script>
	<script>
		function send() {
			//右侧 自己发 调用，只需填一个参数"rightBubble"
			chat("rightBubble");
			var question = $('.chat-info').html();

			$.ajax({
				url : "/talk?question=" + question,
				type : "post",
				dataType : "json",
				success : function(data) {
					if(null != data.url && ""!=data.url){
						chat("leftBubble", "img/robot.jpg", data.text+"<a href="+data.url+">（查看详情） </a>");
					}else{
						chat("leftBubble", "img/robot.jpg", data.text);
					}
				},
			});
			
			//清空输入框
			$('.chat-info').html('');
			//滚动条固定在底部
			$('.bubbleDiv').scrollTop($(".bubbleDiv")[0].scrollHeight);
		}
		
		$(document).ready(function() {
			/*
			 左侧 接收别人信息 调用，三个参数：leftBubble，头像路径，内容
			 chat(element,imgSrc,doctextContent)
			 */
			chat("leftBubble", "img/robot.jpg", "大大，又见到您了呢，囡囡好开心啊！");
			
			//回车發送事件
			document.onkeydown = function(e) {
				var ev = document.all ? window.event : e;
				if (ev.keyCode == 13) {
					send();
				}
			}
			
			document.onkeyup = function(e) {
				var ev = document.all ? window.event : e;
				if (ev.keyCode == 13) {
					//清空输入框
					$('.chat-info').html('');
				}
			}
		})
		
	</script>
</body>
</html>